import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:my_jingdongshop/services/UserServices.dart';
import '../../widget/MyIcons.dart';
import '../../widget/MySnackbar.dart';
import '../../services/EventBus.dart';
import '../../services/ScreenAdapter.dart';
import '../../services/Storage.dart';
import '../../config/Config.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  //监听登录页面销毁的事件
  @override
  dispose() {
    super.dispose();
    eventBus.fire(UserEvent('登录成功...')); // 广播登录成功事件
  }

  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);

    return Scaffold(
      body: SafeArea(
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/login_bg.jpeg'),
              fit: BoxFit.cover,
            ),
          ),
          child: const Column(
            children: [
              Expanded(
                flex: 1,
                child: TopWidget(),
              ),
              Expanded(
                flex: 2,
                child: BottomWidget(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

String username = '';
String password = '';

doLogin() async {
  RegExp reg = RegExp(r"^1\d{10}$");

  if (!reg.hasMatch(username)) {
    showSnackbar(message: "手机号格式错误");
  } else if (password.length < 6) {
    showSnackbar(message: "密码长度至少为6位");
  } else {
    await Storage.setString(
        'userInfo',
        json.encode([
          {"username": username, "password": password}
        ]));
    showSnackbar(message: "登录成功");
    Get.toNamed("/");
  }
}

//上面部分
class TopWidget extends StatelessWidget {
  const TopWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(
          height: 50,
        ),
        Padding(
          padding: EdgeInsets.all(ScreenAdapter.width(40)),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: Text("login".tr,
                    style: const TextStyle(color: Colors.white, fontSize: 45)),
              ),
              const SizedBox(height: 5),
              Align(
                alignment: Alignment.topLeft,
                child: Text("welcome_back".tr,
                    style: const TextStyle(color: Colors.white, fontSize: 20)),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

//下面输入框部分
class BottomWidget extends StatelessWidget {
  const BottomWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: constraints.maxHeight,
            ),
            child: IntrinsicHeight(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(.5),
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(60),
                    topRight: Radius.circular(60),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(
                      left: 40, right: 40, top: 30, bottom: 30),
                  child: Column(
                    children: [
                      const SizedBox(height: 50),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(.7),
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: const [
                            BoxShadow(
                                color: Color.fromRGBO(27, 195, 225, 0.298),
                                blurRadius: 20,
                                offset: Offset(0, 6))
                          ],
                        ),
                        child: Column(
                          children: [
                            //用户名
                            Container(
                              padding: const EdgeInsets.all(10),
                              decoration: const BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                    color: Color.fromARGB(255, 216, 211, 211),
                                  ),
                                ),
                              ),
                              child: TextField(
                                decoration: InputDecoration(
                                  hintText: "username".tr,
                                  hintStyle: const TextStyle(
                                    color: Colors.grey,
                                    fontSize: 18,
                                  ),
                                  border: InputBorder.none,
                                ),
                                onChanged: (value) {
                                  username = value;
                                },
                              ),
                            ),
                            // 密码
                            Container(
                              padding: const EdgeInsets.all(10),
                              decoration: const BoxDecoration(
                                border: Border(
                                  bottom: BorderSide(
                                    color: Color.fromARGB(255, 216, 211, 211),
                                  ),
                                ),
                              ),
                              child: TextField(
                                obscureText: true,
                                decoration: InputDecoration(
                                  hintText: "password".tr,
                                  hintStyle: const TextStyle(
                                    color: Colors.grey,
                                    fontSize: 18,
                                  ),
                                  border: InputBorder.none,
                                ),
                                onChanged: (value) {
                                  password = value;
                                },
                              ),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 30),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          InkWell(
                            onTap: () {},
                            child: Text(
                              "online_service".tr,
                              style: const TextStyle(
                                  color: Colors.grey, fontSize: 18),
                            ),
                          ),
                          InkWell(
                            onTap: () {},
                            child: Text(
                              "forget_password?".tr,
                              style: const TextStyle(
                                  color: Colors.grey, fontSize: 18),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 30),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          ElevatedButton(
                            onPressed: doLogin,
                            style: ElevatedButton.styleFrom(
                              backgroundColor:
                                  const Color.fromARGB(255, 62, 202, 141),
                              padding: const EdgeInsets.symmetric(
                                horizontal: 40,
                                vertical: 15,
                              ),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                            ),
                            child: Text(
                              "login".tr,
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                              ),
                            ),
                          ),
                          ElevatedButton(
                            onPressed: () => Get.toNamed("/registerFirst"),
                            style: ElevatedButton.styleFrom(
                              backgroundColor:
                                  const Color.fromARGB(255, 68, 204, 225),
                              padding: const EdgeInsets.symmetric(
                                horizontal: 40,
                                vertical: 15,
                              ),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(30),
                              ),
                            ),
                            child: Text(
                              "sign_in".tr,
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 40),
                      Text(
                        "continue_with_social_media".tr,
                        style:
                            const TextStyle(color: Colors.grey, fontSize: 17),
                      ),
                      const SizedBox(
                        height: 30,
                      ),
                      const Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Icon(
                            MyIcons.facebook,
                            color: Colors.blue,
                            size: 40,
                          ),
                          SizedBox(
                            width: 30,
                          ),
                          Icon(
                            MyIcons.github,
                            size: 40,
                          ),
                          SizedBox(
                            width: 30,
                          ),
                          Icon(
                            MyIcons.wechat,
                            color: Colors.green,
                            size: 40,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}
